<template>
  <div>
    <etable ref="eTable" v-show="currentState === 'normal'" :columns="columns"
            :tools="['refresh','search']">
    </etable>
  </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'

export default {
  name: 'log',
  components: {
    etable
  },
  data: function () {
    return {
      url: 'sys/log/login/list?',
      currentState: 'normal',
      columns: [
        { title: '#', type: 'index', width: 80, align: 'center' },
        {
          title: '用户名',
          key: 'username',
          align: 'center',
          width: 100,
          searchType: 'input'
        },
        { title: '登录地址', key: 'ip', align: 'center', width: 300 },
        { title: '登录地点',
          align: 'center',
          width: 100,
          render: (h, param) => {
            let address = JSON.parse(param.row.address)
            if (address !== null) {
              return h('span', address.regionName + address.city)
            }
          } },
        {
          title: '浏览器',
          key: 'browser',
          align: 'center',
          minWidth: 400
        },
        { title: '操作系统', key: 'monitorSystem', align: 'center', width: 150 },
        { title: '登录状态',
          key: 'isSuccess',
          align: 'center',
          width: 150,
          render: (h, param) => {
            let text = param.row.isSuccess ? '登录成功' : '登录失败'
            let status = param.row.isSuccess ? 'success' : 'error'
            return h('Badge', {
              props: { text: text, type: status }
            })
          } },
        { title: '操作信息', key: 'msg', align: 'center', width: 150 },
        { title: '执行时间', key: 'createDate', align: 'center', width: 150, sortable: true, searchType: 'datetimerange', alias: 't' }
      ]
    }
  },
  methods: {
    init () {
      this.$refs['eTable'].init(this.url)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
